<script setup lang="ts" name="Recommend">
import API from "@/api";
import { userinfo } from "@/store";
const router = useRouter();
const piniaUserinfo: any = userinfo();

const { t } = useI18n();

const images = reactive({
  bannerDes: new URL(
    "@/assets/images/Recommend/description.png",
    import.meta.url
  ).href,
  Ingots: new URL("@/assets/images/Recommend/Ingots.png", import.meta.url).href,
  makeMoney: new URL("@/assets/images/Recommend/makeMoney.png", import.meta.url)
    .href,
  list: [
    {
      url: new URL(`@/assets/images/Home/banner1.png`, import.meta.url).href,
    },
    {
      url: new URL(`@/assets/images/Home/banner2.png`, import.meta.url).href,
    },
    {
      url: new URL(`@/assets/images/Home/banner3.png`, import.meta.url).href,
    },
    {
      url: new URL(`@/assets/images/Home/banner4.png`, import.meta.url).href,
    },
  ],
});

const data: any = reactive({
  AdvertiseList: [], // 广告列表
  friendConfig:""
});

const { AdvertiseList,friendConfig } = toRefs(data);

const goEarnMoney = () => {
  router.push(`/recommend/inviteFriend`);
};

// 广告列表banner
const queryAdvertiseList = async () => {
  try {
    let res = await API.getAdvertiseList({
      advertiseType: 2
    });
    if (res.code === 200) {
      AdvertiseList.value = res.data;
    }
  } catch (error) {}
};
queryAdvertiseList();
const compAdvertiseList = computed(() => {
  AdvertiseList.value.forEach((element: any) => {
    if (element?.children) {
      let act = element?.children?.find(
        (im: any) => im.languageCode == piniaUserinfo.getLang.languageCode
      );
      if (act) {
        element.title = act?.title;
        element.url = act?.url;
      }
    }
  });
  return AdvertiseList.value;
});
const configBg = computed(() => {
    if (friendConfig.value?.children) {
      let act = friendConfig.value?.children?.find(
        (im: any) => im.languageCode == piniaUserinfo.getLang.languageCode
      );
      if (act) {
        friendConfig.value.url = act?.url;
      }
    }
  return friendConfig.value;
});
// friendConfig配置
const queryFriendConfig = async () => {
  try {
    let res = await API.getConfig({});
    if (res.code === 200) {
      let data = JSON.parse(res.data.iconAddress)
      friendConfig.value = {...res.data,iconAddress:data}
      console.log(friendConfig.value,'friendConfig.value' );
    }
  } catch (error) {}
};
queryFriendConfig()
const jumpAddress = (jumpAddress:any) => {
  window.open(jumpAddress, '_blank');
// window.location.href = jumpAddress
}
const goJumpAddress = (jumpAddress:string) => {
  window.open(jumpAddress, '_blank');
}
</script>

<template>
  <div class="recommendPage">
    <div class="header">
      {{ t("home.btn2") }}
    </div>
    <van-swipe class="recommend-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in compAdvertiseList" :key="index">
        <img :src="item.url" alt="" @click="goJumpAddress(item.jumpAddress)"/>
      </van-swipe-item>
    </van-swipe>
    <div class="topBg">
      <img class="configBg" :src="configBg.url" alt="">
      <!-- <p>{{ t("invite.test13") }}</p> -->
    </div>
    <div class="bottomRebate">
      <div class="makeMoney" @click="goEarnMoney">{{ t("invite.btn1") }}</div>
    </div>
    <div class="contacts">
        <div class="contactTitle">{{ t("invite.test14") }}</div>
        <div class="contactList">
            <div class="contactItem" v-for="(item, index) in friendConfig.iconAddress">
                <img :src="item.customerIcon" alt="" @click="jumpAddress(item.jumpAddress)"/>
            </div>
        </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
<style lang="scss">
.recommend-swipe {
  margin: 0 auto;
  border-radius: 16rem;
  overflow: hidden;
  height: 110rem;
  width: 100%;
  .van-swipe-item {
    overflow: hidden;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
}
</style>
